Skip to main content

Logo

In dxchart5-react you can add your own logo to the chart.

The key mechanism to let you provide your logo to the chart is a custom react component, therefore you can place it wherever you like in main charts area bounds.

To provide your logo component to the chart you should use same old component overriding concept.

Let's dive in through the example.

Assume you are software developer at Apple and the task is to add Apple logo to the chart.

Here is our Logo component, that we want to see on chart

const LogoImageStyled = styled.img`
    position: absolute;
    left: 30px;
    bottom: 40px;
    width: 30px;
    height: 30px;
`;
export const LogoWithCustomStyles = memo<LogoProps>(() => {
    // appleLogo is a locally imported Apple inc. logo
    return <LogoImageStyled src={appleLogo} />;
}

Then you should wire it up via uiOverrides property of ChartReactApp component.

const ChartReactWithCustomStylesLogo = () => {
    // TODO fix TS error
    // @ts-ignore
    return <ChartReactAppWrapper uiOverrides={{ Logo: LogoWithCustomStyles }} />;
}

Finally, as a result you will see this

Options​

If you want to use our suggested styles for Logo you can pass down className that is provided via props to your Logo component.

const LogoWithDefaultStyles = memo<LogoProps>(({ className }) => {
    // appleLogo is a locally imported Apple inc. logo
    // className includes suggested styles that are provided by `dxchart5-react`
    return <img className={className} alt="logo" src={appleLogo} />;
}

Caveats​

You can provide any image, any text and anything you want as a Logo component, because it's just a react component, but here're some recommendations.

  1. src. If you use some image as a Logo, we recommend to use locally imported images, not URL to some remote resource. It's better for performance and security reasons. But if you want to, make sure that you have a proper CORS policy settings for your image resource.
  2. snapshot. We provide functionality to make a snapshot of the chart, and Logo is a part of a snapshot. The key caveat here, that we use HTMLCanvas element as a middleware to convert DOMElements to Image, therefore there are always some quality issues during rendering and it leads to a flaw, that the quality of the image you provided might be not as good as you provided. We're working on that issue, but for now, we recommend to try different image sizes, css styles and so on to end up with the quality that would be acceptable for you.